<template>
  <div class="custom-dialog">
    <!--隐藏滚动条 style="overflow-y:hidden!important;" -->
    <el-dialog
      v-if="allowDrag"
      v-el-drag-dialog
      :visible.sync="visible"
      :title="title"
      :width="width"
      :fullscreen="fullscreen"
      :top="top"
      :modal="modal"
      :modal-append-to-body="modalAppendToBody"
      :append-to-body="appendToBody"
      :lock-scroll="lockScroll"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      :show-close="showClose"
      :before-close="beforeClose"
      :center="center"
      :custom-class="customClass"
      @open="handleOpen"
      @opened="handleOpened"
      @close="handleClose"
      @closed="handleClosed"
    >
      <div v-if="disabled && showConfirmCancelButton || $slots.operation" style="margin-bottom: 10px">
        <span v-if="showConfirmCancelButton">
          <ly-button type="primary" icon="el-icon-circle-check" :loading="confirmButtonLoading" :throttle-click="confirm">保存</ly-button>
          <el-button icon="el-icon-circle-close" class="pause-button" @click="cancel">取消</el-button>
        </span>
        <span v-if="showOneKeyConfirmCancelButton">
          <ly-button type="primary" icon="el-icon-circle-check" :loading="confirmButtonLoading" :throttle-click="confirm">提交</ly-button>
          <el-button icon="el-icon-circle-close" class="pause-button" @click="cancel">取消</el-button>
        </span>
        <span v-if="$slots.operation && showConfirmCancelButton">&nbsp;&nbsp;&nbsp;&nbsp;|&emsp;</span>
        <slot name="operation" />
        <template slot="footer">
          <slot name="footer" />
        </template>
      </div>
      <slot />
    </el-dialog>
    <el-dialog
      v-else
      :visible.sync="visible"
      :title="title"
      :width="width"
      :fullscreen="fullscreen"
      :top="top"
      :modal="modal"
      :modal-append-to-body="modalAppendToBody"
      :append-to-body="appendToBody"
      :lock-scroll="lockScroll"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      :show-close="showClose"
      :before-close="beforeClose"
      :center="center"
      :custom-class="customClass"
      @open="handleOpen"
      @opened="handleOpened"
      @close="handleClose"
      @closed="handleClosed"
    >
      <div v-if="disabled && showConfirmCancelButton || $slots.operation" style="margin-bottom: 10px">
        <span v-if="showConfirmCancelButton">
          <ly-button type="primary" icon="el-icon-circle-check" :loading="confirmButtonLoading" :throttle-click="confirm">保存</ly-button>
          <el-button icon="el-icon-circle-close" class="pause-button" @click="cancel">取消</el-button>
        </span>
        <span v-if="showOneKeyConfirmCancelButton">
          <ly-button type="primary" icon="el-icon-circle-check" :loading="confirmButtonLoading" :throttle-click="confirm">提交</ly-button>
          <el-button icon="el-icon-circle-close" class="pause-button" @click="cancel">取消</el-button>
        </span>
        <span v-if="$slots.operation && showConfirmCancelButton">&nbsp;&nbsp;&nbsp;&nbsp;|&emsp;</span>
        <slot name="operation" />
        <template slot="footer">
          <slot name="footer" />
        </template>
      </div>
      <slot />
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'

export default {
  name: 'LyDialog',
  directives: {
    elDragDialog
  },
  props: {
    disabled: {
      type: Boolean,
      default: true
    },
    allowDrag: {
      type: Boolean,
      default: true
    },
    value: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '50%'
    },
    size: {
      type: String,
      default: undefined
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    top: {
      type: String,
      default: '5vh'
    },
    modal: {
      type: Boolean,
      default: true
    },
    modalAppendToBody: {
      type: Boolean,
      default: true
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    lockScroll: {
      type: Boolean,
      default: true
    },
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    closeOnPressEscape: {
      type: Boolean,
      default: true
    },
    showClose: {
      type: Boolean,
      default: true
    },
    beforeClose: {
      type: Function,
      default: undefined
    },
    center: {
      type: Boolean,
      default: false
    },
    showConfirmCancelButton: {
      type: Boolean,
      default: true
    },
    showOneKeyConfirmCancelButton: {
      type: Boolean,
      default: false
    },
    confirmButtonLoading: {
      type: Boolean,
      default: false
    },
    confirm: {
      type: Function,
      default: undefined
    },
    cancel: {
      type: Function,
      default: undefined
    }
  },
  data() {
    return {
      visible: false
    }
  },
  computed: {
    customClass() {
      let classes = 'dialog-title-background'
      if (this.size === 'mini') {
        classes += ' mini-dialog'
      }
      return classes
    }
  },
  watch: {
    value(val) {
      this.visible = val
    },
    visible(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    handleOpen() {
      this.$emit('open')
    },
    handleOpened() {
      this.$emit('opened')
    },
    handleClose() {
      this.$emit('close')
    },
    handleClosed() {
      this.$emit('closed')
    }
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .dialog-title-background.mini-dialog {
    .el-dialog__header {
      line-height:1;
      padding: 2px 2px;
      .el-dialog__title {
        font-size: 15px;
        line-height: 1.2;
      }
      .el-dialog__headerbtn {
        font-size: 19px;
        width: 30px;
      }
    }
    .el-dialog__body {
      padding: 10px 10px;
      .el-button--mini {
        padding: 5px 12px;
      }
    }
  }
</style>
